<template>
	<div id="one">
		<div id="lk">
			<router-view></router-view>
			<div id="dn">
				<input type="button" value="退出" @click="out()"/>
			</div>
		</div>
		<div id="tp">
			<span>项目名</span>
			<select v-model="page.projectName">
				<option v-for="name in nameList">{{name}}</option>
			</select>
			<input type="button" value="查询" @click="select()" />
		</div>
		<table id="top">
			<tr>
				<td>编号</td>
				<td>项目名</td>
				<td>缺陷名</td>
				<td>缺陷描述</td>
				<td>缺陷分类</td>
				<td>缺陷程度</td>
				<td>处理优先级</td>
				<td>处理状态</td>
				<td>预计完成时间</td>
				<td>预计处理时长</td>
				<td>创建人</td>
				<td>创建时间</td>
				<td>操作</td>
			</tr>
			<tr v-for="(bug,index) in recordBug">
				<td>{{bug.bugId}}</td>
				<td>{{bug.projectName}}</td>
				<td>{{bug.bugName}}</td>
				<td>{{bug.bugDetail}}</td>
				<td>{{bug.bugClassify}}</td>
				<td>{{bug.degree}}</td>
				<td>{{bug.bugPriority}}</td>
				<td>{{bug.dostate}}</td>
				<td>{{bug.pendtime}}</td>
				<td>{{bug.ptime}}</td>
				<td>{{bug.createbyName}}</td>
				<td>{{bug.createTime}}</td>
				<td>
					<input type="button" value="操作" @click="deal(index)">
				</td>
			</tr>
			<tr>
				<td>
					<input type="button" value="上一页" @click="pre()" />
				</td>
				<td id="dd">
					<span>第</span>
					<input type="text" v-model="page.pageNum" />
					<span>页</span>
				</td>
				<td>
					<span>行数</span>
					<select v-model="page.pageSize">
						<option value="3">3</option>
						<option value="5">5</option>
						<option value="10">10</option>
					</select>
				</td>
				<td>
					<input type="button" value="下一页" @click="next()" />
				</td>
			</tr>
		</table>
	</div>
</template>

<script>
	import $ from "jquery"
	export default {

	  name: "QueryBugByState",
	  data:function() {
		  return {
			  recordBug:[],
			  nameList:[],
			  page:{
				  projectName:"",
				  state:"待分配",
				  pageNum:"1",
				  pageSize:"3",
				  pages:""
			  }
		  }
	  },
	  created:function(){
		  this.select();
		  this.selectProjectName();
	  },
	  methods: {
		  select:function(){
			  var ts = this;
			  $.ajax({
				  url:"http://localhost/bugDistribution/queryByState",
				  type:"get",
				  data:ts.page,
				  headers:{"token":localStorage.getItem("token")},
				  success:function(data){
					  ts.recordBug=data.obj.list;
					  ts.page.pageNum=data.obj.pageNum;
					  ts.page.pages=data.obj.pages;
				  }
			  })
		  },
		  selectProjectName:function(){
		  			  var ts = this;
		  			  $.ajax({
		  				  url:"http://localhost/bugDistribution/queryAllPN",
		  				  type:"get",
		  				  headers:{"token":localStorage.getItem("token")},
		  				  success:function(data){
		  					  ts.nameList = data.list;
		  				  }
		  				  
		  			  })
		  },
		  deal:function(index){
			  $("#lk").attr("style","display: block")
			  var bugId=this.recordBug[index].bugId;
			  this.$router.push({
				  path:"/DistributionBug",
				  query:{
					  bugId:bugId
				  }
			  })
		  },
		  pre:function(){
			  if(this.page.pageNum==1){
				  alert("当前已经是第一页了！！！！！");
			  }else{
				  this.page.pageNum--;
				  this.select();
			  }	
		  },
		  next:function(){
			  if(this.page.pageNum==this.page.pages){
			  	alert("当前已经是最后一页了！！！！！");
			  }else{
			  	this.page.pageNum++;
				this.select();
			  }	
		  },
		  out:function(){
			  $("#lk").attr("style","display: none")
			  this.$router.push("/QueryBugByState")
		  }
	  },
	  watch:{
		page:{	
		  	handler:function(n,o){
				if(this.page.pageNum!=""&&this.page.pageNum<=this.page.pages){
					this.select();
				}
		  	},
		  	deep:true
		}
	  }
	}
</script>

<style scoped>
	#top{
		width: 100%;
		float: left;
		margin-left: 0%;
		background-color: #bebebe;
		text-align: center;
		line-height: 30px;
	}
	#lk{
		position: absolute;
		margin-top: 100px;
		margin-left: 300px;
		background-color: #d8d8d8;
		height: 500px;
		width: 400px;
		display: none;
	}
	#dn{
		height: 20px;
		width: 60px;
		float: right;
		margin-top: 30px;
	}
	#dd input{
		width: 20px;
	}
	#tp{
    width: 100%;
		float: left;
		margin-left: 0%;
		background-color: #bebebe;
		text-align: center;
		line-height: 30px;
	}
</style>